<!--
  专家页面组织病理
  lzx
  2020年1月13日
  www
  2020.01.16
-->
<template lang="pug">
  el-container
    el-header.header
      title-bg
    el-container
      el-aside.nav-layout(width="258px")
        nav-menu
      el-main.main-live
        main-content(modularTitle="图像上传")
        div.main-content-box
          p.main-content-title image upload
          el-row(:gutter="28")
            el-col(:span="16")
              el-card
                div(slot="header").card-title 患者列表
                div.patient-box(ref="patientCard")
                  el-table(
                    :data="patientList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                    :height="tableHeight"
                    @current-change="rowChange"
                    highlight-current-row
                    stripe
                  )
                    el-table-column(type="index" label="序号" align="center")
                    el-table-column(label="患者姓名" prop="name" align="center" width="120")
                    el-table-column(label="申请医师" prop="doctor" align="center" width="120")
                    el-table-column(label="原切片单位" prop="hospitalName" align="center")
                    el-table-column(label="申请时间" prop="applicationTime" align="center")
                    el-table-column(align="center")
                      template(slot-scope="scope")
                        el-button(size="mini" @click="toAnchor(scope.$index, scope.row)") {{btnText}}
                  div.pagination-box
                    el-button.pagination-btn(size="mini" @click="handleCurrentChange(1)" v-if="pageSize > 10") 首页
                    el-pagination.pagination-btn(
                      layout="pager"
                      :total="total"
                      :page-size="pageSize"
                      :current-page="currentPage"
                      hide-on-single-page
                      @current-change="handleCurrentChange"
                    )
                    el-button.pagination-btn(size="mini" @click="handleCurrentChange(Math.ceil(total / pageSize))" v-if="pageSize > 10") 尾页
            el-col(:span="8")
              el-card.form-card
                div(slot="header").card-title 患者信息
                div.form-box(ref="form")
                  el-form(:model="formModel" label-width="120px" size="medium")
                    el-form-item(label="患者姓名：")
                      el-input(v-model="formModel.name" readonly)
                    el-form-item(label="年龄：")
                      el-input(v-model="formModel.age" readonly)
                    el-form-item(label="性别：")
                      el-input(v-model="formModel.sex" disabled)
                    el-form-item(label="申请医师：")
                      el-input(v-model="formModel.doctor" disabled)
                    el-form-item(label="申请时间：")
                      el-input(v-model="formModel.applicationTime" disabled)
                    el-form-item(label="原切片单位：")
                      el-input(v-model="formModel.hospitalName" readonly)
                    el-form-item(label="切片类型：")
                      el-input(v-model="formModel.cname" readonly)
                    el-form-item(label="病理号：")
                      el-input(v-model="formModel.pathologyNum" readonly)
                    el-form-item(label="临床诊断：")
                      el-input(v-model="formModel.diagnosis" readonly)
                    el-form-item(label="肉眼及手术所见：")
                      el-input(v-model="formModel.diagnosisDetail" type="textarea" resize="none" readonly :rows="4")

</template>

<script>
  import TitleBg from '../../components/TitleBg'
  import NavMenu from '../../components/NavMenu'
  import MainContent from '../../components/MainContent'

  export default {
    components: {
      MainContent,
      NavMenu,
      TitleBg
    },
    name: 'liveIndex',
    data() {
      return {
        fullHeight: document.documentElement.clientHeight, // 屏幕可视区域高度
        patientList: [], // 患者列表
        tableHeight: null, // 表格高度——随屏幕高度实时变化
        total: 0, // 分页所需患者总数
        pageSize: 10, // 分页每页页显示患者条数
        currentPage: 1, // 当前分页页数,
        btnText: '',
        formModel: {}, // 患者信息表单数据
        identity: ''
      }
    },
    mounted() {
      const that = this
      // 窗口变化重新计算高度
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight
          that.fullHeight = window.fullHeight
          that.$nextTick(() => {
            that.tableHeight = that.fullHeight - 278 - 80 // 患者列表表格高度
            that.$refs.form.style.height = that.fullHeight - 278 - 33 + 'px' // 患者详情表单高度
            that.$refs.patientCard.style.height = that.fullHeight - 278 - 33 + 'px' // 患者列表盒子高度
          })
        })()
      }
      this.$nextTick(() => {
        that.tableHeight = that.fullHeight - 278 - 80 // 患者列表表格高度
        that.$refs.form.style.height = that.fullHeight - 278 - 33 + 'px' // 患者详情表单高度
        that.$refs.patientCard.style.height = that.fullHeight - 278 - 33 + 'px' // 患者列表盒子高度
      })
      // 获取用户身份
      this.identity = JSON.parse(this.$KalixCatch.get('personaltwo'))
      console.log('------identity------', this.identity)
      if (this.identity[0].identity === '医生') {
        this.getPatientData()
        this.btnText = '图像直播'
      } else if (this.identity[0].identity === '专家') {
        this.getInviteData()
        this.btnText = '加入会诊'
      }
    },
    watch: {
      // 监听屏幕可视区域高度变化
      fullHeight(val) {
        // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
        if (!this.timer) {
          // 一旦监听到的fullHeight值改变，就将其重新赋给data里的fullHeight
          this.fullHeight = val
          this.timer = true
          let that = this
          setTimeout(function () {
            that.timer = false
          }, 400)
        }
      }
    },
    methods: {
      // 切换当前页
      handleCurrentChange(val) {
        console.log('当前页:', val)
        this.currentPage = val
      },
      // 点击按钮跳转开播页面
      toAnchor(index, row) {
        console.log('当前行:', index, row)
        if (this.identity[0].identity === '医生') {
          this.$router.push({
            path: '/live/anchor',
            name: 'anchor',
            query: {patientId: row.id}
          })
        } else if (this.identity[0].identity === '专家') {
          this.$router.push({
            path: '/live/audience',
            name: 'audience',
            query: {patientId: row.id}
          })
        }
      },
      // 获取患者信息列表
      getPatientData() {
        this.$http.request({
          method: 'GET',
          url: 'camel/rest/telemedicine/files/getDoctorLive',
          params: {
            doctorId: this.$KalixCatch.get('id')
          }
        }).then(res => {
          let _data = res.data.data
          console.log('------Patient------', _data)
          this.patientList = _data
          this.total = this.patientList.length
        })
      },
      // 点击表格更新右侧表单数据
      rowChange(val) {
        this.formModel = val
        this.formModel.sex === 1 ? this.formModel.sex = '男' : this.formModel.sex = '女'
      },
      // 专家获取被邀请的患者信息数据
      getInviteData() {
        this.$http.request({
          method: 'GET',
          url: '/camel/rest/telemedicine/files/getExpertLive',
          params: {
            expertId: this.$KalixCatch.get('id')
          }
        }).then(res => {
          let _data = res.data.data
          console.log('------inveteData------', _data)
          this.patientList = _data
          this.total = this.patientList.length
        })
      }
    }
  }
</script>

<style scoped lang="stylus">
  .header
    padding 0

  .nav-layout
    position relative
    height 100%

  .main-live
    margin-left 27px
    padding 0

    .main-content-box
      padding-right 27px
      margin-top 28px
      overflow-y auto
      overflow-x hidden

      .main-content-title
        color #a2c8f8
        font-size 14px

      .el-card
        margin-top 25px

        .card-title
          font-size 16px

        .pagination-box
          display flex
          justify-content center

          .pagination-btn
            display inline-block
            vertical-align middle
            margin-top 15px

  .form-card
    .el-form-item
      margin-bottom 20px

  .form-box
    overflow auto
</style>
